<template>
    <div>
        <StudentForm @onAddStudent="onAddStudent" @onUpdateStudent="onUpdateStudent" :updateStudent="updateStudent" />
        <StudentTable :studentData="studentData" @onDeleteStudent="onDeleteStudent" @onGetUpdateStudent="onGetUpdateStudent"/>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import StudentForm from './StudentForm.vue'
import StudentTable from './StudentTable.vue';

const studentData = ref([
    {id:1,name:'张三',age:20},
    {id:2,name:'李四',age:18},
    {id:3,name:'王五',age:16}
])
const updateStudent = ref({});

function onDeleteStudent(studnetId){
    studentData.value = studentData.value.filter(item=>{
        return item.id !==studnetId;
    })
}

function onAddStudent(studentItem){
    studentData.value.push({
        id:Date.now(),
        ...studentItem
    });
}

function onUpdateStudent(studentItem){
    studentData.value = studentData.value.map(item=>{
        if(item.id==studentItem.id){
            return studentItem;
        }
        return item;
    })
}

function onGetUpdateStudent(updateItem){
    updateStudent.value = {...updateItem};
}

</script>

<style scoped>

</style>